<template>
  <e-table
    @getList="handleGetList"
    :tableData="tableData"
    :columns="columns"
    :loading="loading"
    :total="total"
  >
    <el-table-column slot="sort" label="排序">
      <template slot-scope="scope">
        <a-input
          type="number"
          style="width: 65px"
          :max="100"
          v-model="scope.row.permissionOrder"
          @blur="handleOrderChange(scope.row)"
        />
      </template>
    </el-table-column>
    <el-table-column slot="state" label="状态" width="80" align="center">
      <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.state === 0">启用</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column slot="action" fixed="right" width="50" align="center">
      <template slot-scope="scope">
        <el-dropdown>
          <a class="el-dropdown-link">
            <i class="el-icon-menu"></i>
          </a>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="handleEdit(scope.row)">
              <a>编辑</a>
            </el-dropdown-item>
            <el-dropdown-item @click.native="handleForbid(scope.row)">
              <a
                :class="scope.row.state === 0 ? 'red' : ''"
                href="javascript:;"
              >{{ scope.row.state === 0 ? '禁用' : '启用' }}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </e-table>
</template>

<script>
import { queryPermissionById, updatePermissionInfo, changeState, updateOrder } from '@/api/role'
export default {
  data() {
    return {
      visible: false,
      mdl: {},
      // 查询参数
      queryParam: {
        permissionId: ''
      },
      // 表头
      columns: [
        {
          label: '权限名称(唯一)',
          prop: 'permissionName'
        },
        {
          label: '显示名称',
          prop: 'permissionShowName'
        },
        { slot: 'sort' },
        { slot: 'state' },
        { slot: 'action' }
      ],
      loading: false,
      tableData: [], // 表格数据
      total: 1,
      // 向后端拉取可以用的操作列表
      permissionList: null,
      permissionId: 'system'
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    getId(id) {
      this.queryParam.permissionId = id
      this.handleGetList()
    },
    // 修改排序接口
    async handleOrderChange(row) {
      if (row.permissionOrder > 100) {
        openNotification('error', '错误', '排序值是0-100')
        return false
      }
      const res = await updatePermissionInfo(row)
      console.log('res', res)
    },
    async handleForbid(row) {
      let state = row.state === 0 ? 1 : 0
      const param = { permissionId: row.permissionId, state }
      const res = await changeState(param)
      if (res.state === '000000') {
        console.log('permissionId', this.permissionId)
        const index = this.tableData.findIndex(v => v.permissionId === row.permissionId)
        console.log('state', state, index)
        // let state = state === 0 ? 1 : 0
        this.$nextTick(() => {
          this.$set(this.tableData[index], 'state', state)
        })
        // this.handleGetList({ permissionId: row.permissionId })
      }
    },
    handleEdit(row) {
      this.$emit('edit', true, row)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await queryPermissionById(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
